<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>宠物列表</title>
    <link rel="stylesheet"
          href="semantic_files/semantic/dist/semantic.min.css">

    <script src="css/jquery-3.1.1.min.js"></script>

    <script src="semantic_files/semantic/dist/semantic.min.js"></script>

    <script src="css/vue.min.js"></script>

    <script src="css/axios.min.js"></script>

</head>

<body>

<div id="app">

    <div class="ui bottom attached segment pushable">
        <!--侧边栏-->
        <div class="ui visible inverted left vertical sidebar menu" style="background: #8a8a8a">
            <img src="images/index/logo.png" width="220px">
            <a class="item">
                <i class="home icon"></i>
                主页
            </a>
            <a class="item">
                <i class="block layout icon"></i>
                领养
                <i class="dropdown icon"></i>
                <div class="menu">
                    <a class="item" @click="toAll">所有小动物</a>
                    <a class="item" @click="toCat">猫猫</a>
                    <a class="item" @click="toDog">狗狗</a>
                </div>
            </a>
            <a class="item">
                <i class="smile icon"></i>
                寄养
            </a>
            <a class="item">
                <i class="calendar icon"></i>
                捐赠支持
            </a>
            <a class="item">
                <i class="calendar icon"></i>
                联系我们
            </a>
        </div>
        <!--右边内容-->
        <div class="pusher">
            <div class="ui left aligned striped segment">
                <div class="ui stackable grid container" style="height: 950px">
                    <div class="ui three cards" style="margin-top: 20px;margin-bottom: 20px;margin-left: -100px">
                        <div class="card" style="width: 300px;height: 415px" v-for="pet of pets">
                            <div class="image" style="height: 300px">
                                <img :src="pet.imga" style="height: 300px">
                            </div>
                            <div class="content">
                                <div class="header meta"><a :href="'detail.html?pid=' + pet.pid">{{pet.pname}}</a></div>
                                <div class="description" v-if="pet.price != 0">
                                    {{pet.price}}
                                </div>
                                <div class="description">
                                    {{pet.desp}}
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <a class="content" style="margin:20px;font-size: 30px">当前页：{{pageNumber}}</a>

                <div class="ui middle buttons" style="margin-left: 10%">
                    <div class="ui button" @click="pagetofirst">首页</div>
                    <div class="ui button" @click="pagetopro">上一页</div>
                    <div class="ui button" @click="pagetonext">下一页</div>
                </div>

            </div>

        </div>


    </div>


</div>
</body>

<script>

    var ue = new Vue({
        el: '#app',
        data() {
            return {
                pageNumber: 1,
                pageSize: 6,
                ptid: -1,
                // pet: {
                //     pid: '',
                //     pname: '',
                //     ptid: '',
                //     price: '',
                //     pbirth: '',
                //     ptime: '',
                //     imga: '',
                //     imgb: '',
                //     imgc: '',
                //     uid: '',
                //     pstatus: '',
                //     desp: ''
                // },
                pets: [],
            }
        },
        mounted: function () {
            this.listInfo()
        },
        methods: {
            listInfo: function () {
                axios.post("findByCriterion", {
                    page: {
                        pageNumber: this.pageNumber,
                        pageSize: this.pageSize,
                    },
                    pet: {
                        ptid: this.ptid
                    }
                }).then(function (response) {
                    if (response.data.length > 0) {
                        ue.pets = response.data
                    } else if (ue.pageNumber >= 2) {
                        ue.pageNumber -= 1
                    } else {
                        alert("查找不到数据！")
                    }
                    for (pet of ue.pets) {
                        console.log(pet)
                    }
                })
            },
            pagetofirst: function () {
                ue.pageNumber = 1
                this.listInfo()
            },
            pagetopro: function () {
                if (ue.pageNumber >= 2) {
                    ue.pageNumber -= 1
                } else ue.pageNumber = 1
                this.listInfo()
            },
            pagetonext: function () {
                ue.pageNumber += 1
                this.listInfo()
            },
            toAll: function () {
                ue.pageNumber = 1
                ue.ptid = -1
                this.listInfo()
            },
            toCat: function () {
                ue.pageNumber = 1
                ue.ptid = 1
                this.listInfo()
            },
            toDog: function () {
                ue.pageNumber = 1
                ue.ptid = 2
                this.listInfo()
            }
        },

    })
</script>

</html>